import React, { Component } from 'react'
import style from "./list_nav.module.css"
import { Button } from 'antd-mobile';
import axios from 'axios'
class list_nav extends Component {
    state = {
        paixu: ['默认排序', '热销优先', '低价优先', '高价优先'],
        paixuarr: '',
        paixuflag: false,
        huxingflag: false,
        jiageflag: false,
        quyuflag: false,
        saixuanflag:false,
        mianji: ['不限', '50㎡以下', '50-70㎡', '70-90㎡', '90-120㎡', '120-150㎡', '150-200㎡', '200㎡以上'],
        jushi: ['1室', '2室', '3室', '4室', '5室', '6室', '7室', '公寓', '别墅', '洋房', '复式', '其他', '商品', '写字楼', '7室以上'],
        quyu: ['浑南区', '和平区', '大东区', '沈北区'],
        ischeck: true,
        junjia: ['4000元以下', '4000-8000元', '6000-8000元', '8000-10000元', '1-1.5万', '1.5-2万', '2-2.5万', '2.5万以上', '2.5-3万', '3-5万', '5-7万', '7万以上'],
        zongjia: ['50万以下', '50-90万', '90-120万', '120-150万', '150-200万', '200-300万'],
        wuye:['商住公寓','写字楼','普通住宅','跃层','迷你别墅','loft公寓','酒店式公寓','别墅','四合院','商铺','商业别墅','花园洋房','产权式酒店','公寓'],
        zhuangxiu:['毛坯','非毛坯'],
        shoumai:['在售','代售','售罄','认筹','即将开盘','停售'],
        kaipan:['已开盘','未开盘'],
        tese:['小别墅','学府地产','旅游地产','海景房','江/湖景房','花园洋房','高档小区','临地铁','低密居所','写字楼','品牌地产','别墅','商铺','近期开盘','小户型','低总价','低首付','现房','优惠房','VR看房','直播看房','航怕楼盘','住宅','宜居生态',''],
        wuyearr:[],
        zhuangxiuarr:'',
        shoumaiarr:[],
        kaipanarr:'',
        tesearr:[],
        paiarr:0,
        zongjiaarr: [],
        junjiaarr: [],
        quyuarr: [],
        jushiarr: [],
        mianjiarr: '不限',
    }
    changFlag = () => {
        this.setState({
            quyuflag: !this.state.quyuflag,
            paixuflag: false,
            huxingflag: false,
            jiageflag: false,
            saixuanflag:false,
        })
    }
    changePai = (i) => {
        this.state.paixuarr = i
        const headerJSON = {
            "Content-Type": "application/json;charset=UTF-8"
        };
        var readyData = JSON.stringify({
            orders: i,
        });
        axios({
            url: "/shop/search",
            method: 'post',
            headers: headerJSON,
            data: readyData
        }).then(res => {
            this.props.changeShopList(res.data.lists)
        })
        this.changePaiFlag()
        this.setState({
            paiarr:i
        })
    }
    changePaiFlag = () => {
        this.setState({
            paixuflag: !this.state.paixuflag,
            huxingflag: false,
            jiageflag: false,
            quyuflag: false,
            saixuanflag:false,
        })
    }
    changeMianji = (e) => {
        this.setState({
            mianjiarr: e.target.innerHTML
        })
    }
    changeJushi = (e) => {
        if (this.state.jushiarr.indexOf(e.target.innerHTML) !== -1) {
            this.state.jushiarr.splice(this.state.jushiarr.indexOf(e.target.innerHTML), 1)
            this.setState({})
            return
        }
        if (this.state.jushiarr.length >= 6) {
            this.state.jushiarr.splice(0, 1, e.target.innerHTML)
        } else {
            this.state.jushiarr.push(e.target.innerHTML)
        }
        this.setState({})
    }
    clearJushi = () => {
        this.setState({
            jushiarr: []
        })
    }
    quyuyes = () => {
        let a = this.state.quyuarr.join("/")
        const headerJSON = {
            "Content-Type": "application/json;charset=UTF-8"
        };
        axios({
            url: "/shop/search",
            method: 'post',
            headers: headerJSON,
            data: {
                places: a
            }
        }).then(res => {
            this.props.changeShopList(res.data.lists)
        })
        this.setState({
            quyuflag: !this.state.quyuflag,
            paixuflag: false,
            huxingflag: false,
            jiageflag: false,
            saixuanflag:false,
        })
    }
    quyuclear = () => {
        axios.get('/shop/getall').then(res => {
            this.props.changeShopList(res.data.lists)
            this.setState({
                jushiarr: [],
                mianjiarr: '不限',
                quyuflag: !this.state.quyuflag,
                paixuflag: false,
                huxingflag: false,
                jiageflag: false,
                saixuanflag:false,
            })
        })
    }
    changeHuxing = () => {
        this.setState({
            huxingflag: !this.state.huxingflag,
            paixuflag: false,
            jiageflag: false,
            quyuflag: false,
            saixuanflag:false,
        })
    }
    changequyu = (e) => {
        if (this.state.quyuarr.indexOf(e.target.value) !== -1) {
            this.state.quyuarr.splice(this.state.quyuarr.indexOf(e.target.value), 1)
            this.setState({})
            return
        }
        this.state.quyuarr.push(e.target.value)
        this.setState({
            ischeck: false
        })
    }
    changeB = () => {
        this.state.quyuarr = []
        this.setState({ ischeck: true })
    }
    huxingyes = () => {
        let a = this.state.jushiarr.join("/")
        const headerJSON = {
            "Content-Type": "application/json;charset=UTF-8"
        };
        axios({
            url: "/shop/search",
            method: 'post',
            headers: headerJSON,
            data: {
                rooms: a,
                area: this.state.mianjiarr
            }
        }).then(res => {
            this.props.changeShopList(res.data.lists)
        })
        this.setState({
            huxingflag: !this.state.huxingflag,
            paixuflag: false,
            jiageflag: false,
            quyuflag: false,
            saixuanflag:false,
        })
    }
    huxingclear = () => {
        axios.get('/shop/getall').then(res => {
            this.props.changeShopList(res.data.lists)
            this.setState({
                jushiarr: [],
                mianjiarr: '不限',
                huxingflag: !this.state.huxingflag,
                paixuflag: false,
                jiageflag: false,
                quyuflag: false,
                saixuanflag:false,
            })
        })
    }
    changeJunjiaarr = (e) => {
        if (this.state.junjiaarr.length === 1) {
            this.state.junjiaarr.splice(0, 1, e.target.innerHTML)
            this.setState({})
            return
        }
        if (this.state.junjiaarr.indexOf(e.target.innerHTML) !== -1) {
            this.state.junjiaarr.splice(this.state.junjiaarr.indexOf(e.target.innerHTML), 1)
        } else {
            this.state.junjiaarr.push(e.target.innerHTML)
        }
        this.setState({})
    }
    changeZongJiaarr = (e) => {
        if (this.state.zongjiaarr.length === 1) {
            this.state.zongjiaarr.splice(0, 1, e.target.innerHTML)
            this.setState({})
            return
        }
        if (this.state.zongjiaarr.indexOf(e.target.innerHTML) !== -1) {
            this.state.zongjiaarr.splice(this.state.zongjiaarr.indexOf(e.target.innerHTML), 1)
        } else {
            this.state.zongjiaarr.push(e.target.innerHTML)
        }
        this.setState({})
    }
    zongjiayes = () => {
        const headerJSON = {
            "Content-Type": "application/json;charset=UTF-8"
        };
        axios({
            url: "/shop/search",
            method: 'post',
            headers: headerJSON,
            data: {
                avgPrice: this.state.junjiaarr[0],
                totalPrice: this.state.zongjiaarr[0]
            }
        }).then(res => {
            this.props.changeShopList(res.data.lists)
        })
        this.setState({
            jiageflag: !this.state.jiageflag,
            paixuflag: false,
            huxingflag: false,
            quyuflag: false,
            saixuanflag:false,
        })
    }
    zongjiano = () => {
        // axios.get('/shop/getall').then(res => {
        //     this.props.changeShopList(res.data.lists)

        // })
        this.setState({
            zongjiaarr: [],
            junjiarr: [],
            jiageflag: !this.state.jiageflag,
            paixuflag: false,
            huxingflag: false,
            quyuflag: false,
            saixuanflag:false,
        })
    }
    changeZong = () => {
        this.setState({
            jiageflag: !this.state.jiageflag,
            paixuflag: false,
            huxingflag: false,
            quyuflag: false,
            saixuanflag:false,
        })
    }
    clearJunjia=()=>{
        this.setState({
            junjiaarr:[]
        })
    }
    clearZongjia=()=>{
        this.setState({
            zongjiaarr:[]
        })
    }
    changeSai=()=>{
        this.setState({
            saixuanflag:!this.state.saixuanflag,
            paixuflag: false,
            huxingflag: false,
            jiageflag: false,
            quyuflag: false,
        })
    }
    changeWuye=(e)=>{
        if (this.state.wuyearr.indexOf(e.target.innerHTML) !== -1) {
            let count = this.state.wuyearr.indexOf(e.target.innerHTML)
            this.state.wuyearr.splice(count, 1)
            this.setState({})
            return
        }
        if (this.state.wuyearr.length === 6) {
            this.state.wuyearr.splice(0, 1, e.target.innerHTML)
            this.setState({})
            return
        }
        this.state.wuyearr.push(e.target.innerHTML)
        this.setState({})
    }
    wuyeclear=()=>{
        this.setState({
            wuyearr:[]
        })
    }
    changeZhuangXiu=(e)=>{
        this.state.zhuangxiuarr = e.target.innerHTML
        this.setState({
        })
    }
    zhuangxiuclear=()=>{
        this.setState({
            zhuangxiuarr:''
        })
    }
    clearshou=()=>{
        this.setState({
            shoumaiarr:[]
        })
    }
    changeShouMai=(e)=>{
        if (this.state.shoumaiarr.indexOf(e.target.innerHTML) !== -1) {
            let count = this.state.shoumaiarr.indexOf(e.target.innerHTML)
            this.state.shoumaiarr.splice(count, 1)
            this.setState({})
            return
        }
        this.state.shoumaiarr.push(e.target.innerHTML)
        this.setState({})
    }
    clearTese=()=>{
        this.setState({
            tesearr:[]
        })
    }
    changeTeSe=(e)=>{
        if (this.state.tesearr.indexOf(e.target.innerHTML) !== -1) {
            let count = this.state.tesearr.indexOf(e.target.innerHTML)
            this.state.tesearr.splice(count, 1)
            this.setState({})
            return
        }
        if (this.state.tesearr.length === 6) {
            this.state.tesearr.splice(0, 1, e.target.innerHTML)
            this.setState({})
            return
        }
        this.state.tesearr.push(e.target.innerHTML)
        this.setState({})
    }
    clearKaipan=()=>{
        this.setState({
            kaipanarr:''
        })
    }
    changeKaiPan=(e)=>{
        this.setState({
            kaipanarr:e.target.innerHTML
        })
    }
    clearSai=()=>{
        this.setState({
            wuyearr:[],
            zhuangxiuarr:'',
            shoumaiarr:[],
            kaipanarr:'',
            tesearr:[],
            paixuflag: false,
            huxingflag: false,
            jiageflag: false,
            quyuflag: false,
            saixuanflag:false,
        })
    }
    Saiyes=()=>{
        let {wuyearr,zhuangxiuarr,shoumaiarr,kaipanarr,tesearr} = this.state
        console.log(wuyearr,zhuangxiuarr,shoumaiarr,kaipanarr,tesearr)
        const headerJSON = {
            "Content-Type": "application/json;charset=UTF-8"
        };
        axios({
            url:"/shop/search",
            method:'post',
            headers: headerJSON,
            data:{
                ronovation:zhuangxiuarr,
                properties:wuyearr.join('/'),
                saleTyPe:shoumaiarr.join('/'),
                openTime:kaipanarr,
                specials:tesearr.join('/')
            }
        }).then(res=>{
            console.log(res)
            this.props.changeShopList(res.data.lists)
            this.setState({
                paixuflag: false,
                huxingflag: false,
                jiageflag: false,
                quyuflag: false,
                saixuanflag:false,
            })
        })
    }
    render() {
        return (
            <div className={style.list_nian}>
                <ul className={style.list_nav}>
                    <li className={this.state.quyuarr.length? style.bian :'' } onClick={this.changFlag}>区域<div className={style.sanjiao}></div></li>
                    <li className={this.state.junjiaarr.length || this.state.zongjiaarr.length ? style.bian : ''} onClick={this.changeZong}>价格<div className={style.sanjiao}></div></li>
                    <li className={this.state.jushiarr.length || this.state.mianjiarr !== '不限' ? style.bian : ''} onClick={this.changeHuxing}>户型<div className={style.sanjiao}></div></li>
                    <li className={this.state.wuyearr.length || this.state.shoumaiarr.length ||this.state.tesearr.length ||this.state.zhuangxiuarr!==''||this.state.kaipanarr!=='' ? style.bian : ''} onClick={this.changeSai}>筛选<div className={style.sanjiao}></div></li>
                    <li className={this.state.paixuarr !== '' ? style.bian : ''} onClick={this.changePaiFlag}>排序<div className={style.sanjiao}></div></li>
                </ul>
                <ul className={style.list_nav_nav}>
                    <li>小户型</li>
                    <li>现房</li>
                    <li>海景房</li>
                    <li>名企房</li>
                    <li>VR看房</li>
                </ul>
                <div className={this.state.paixuflag ? style.paixu : style.nopaixu}>
                    {
                        this.state.paixu.map((item, i) => {
                            return <p onClick={() => this.changePai(i)} key={i}>{item}</p>
                        })
                    }
                </div>
                <div className={this.state.huxingflag ? style.paixu : style.nopaixu}>
                    <div className={style.huxingtop} style={{ overflow: 'auto' }}>
                        <div>
                            <h3>面积</h3>
                            <div className={style.mianji}>

                                {
                                    this.state.mianji.map((item, i) => {
                                        return <div className={this.state.mianjiarr.indexOf(item) !== -1 ? style.ymianji : ''} key={i} onClick={this.changeMianji}>
                                            {item}
                                        </div>
                                    })
                                }
                            </div>
                        </div>
                        <div>
                            <h3 className={style.jushiduo}>居室<span>(多选)</span></h3>
                            <div className={style.jushi}>
                                <div onClick={this.clearJushi} className={!this.state.jushiarr.length ? style.ymianji : ''} key={'不限'}>
                                    不限
                                </div>
                                {
                                    this.state.jushi.map((item, i) => {
                                        return <div className={this.state.jushiarr.indexOf(item) !== -1 ? style.ymianji : ''} key={i} onClick={this.changeJushi}>
                                            {item}
                                        </div>
                                    })
                                }
                            </div>
                        </div>
                    </div>
                    <div style={{ width: '100%', position: 'absolute', bottom: '0', display: 'flex', justifyContent: 'space-around', marginTop: '0.2rem', borderTop: "1px solid #c3c7ca", paddingTop: '0.1rem', paddingBottom: '0.1rem' }}>
                        <Button onClick={this.huxingclear} style={{ color: '#919598', width: '20%', lineHeight: '0.5rem', height: '0.5rem', fontSize: "0.3rem", background: "#ebf5ff", border: '0' }}>清空</Button>
                        <Button onClick={this.huxingyes} style={{ width: '60%', lineHeight: '0.5rem', height: '0.5rem', fontSize: "0.3rem" }} type="primary">确定</Button>
                    </div>
                </div>

                <div className={this.state.quyuflag ? style.paixu : style.nopaixu}>
                    <div className={style.quyutop}>
                        <div className={style.quyuleft}>
                            <p className={style.quyuleftxx}>区域</p>
                        </div>
                        <div className={style.quyuright}>
                            <ul>
                                <li><label htmlFor='bx' name='区域'>不限</label><input onChange={() => { this.changeB() }} checked={this.state.ischeck} id='bx' type='checkbox' name='区域' value={'不限'} /></li>
                                {
                                    this.state.quyu.map((item, i) => {
                                        return <li key={i}><label htmlFor={item} name='区域'>{item}</label><input checked={this.state.quyuarr.indexOf(item) === -1 ? false : true} onChange={this.changequyu} id={item} type='checkbox' name='区域' value={item} /></li>
                                    })
                                }
                            </ul>
                        </div>
                    </div>
                    <div style={{ width: '100%', position: 'absolute', bottom: 0, display: 'flex', justifyContent: 'space-around', marginTop: '0.2rem', borderTop: "1px solid #c3c7ca", paddingTop: '0.1rem' }}>
                        <Button onClick={this.quyuclear} style={{ color: '#919598', width: '20%', lineHeight: '0.5rem', height: '0.5rem', fontSize: "0.3rem", background: "#ebf5ff", border: '0' }}>清空</Button>
                        <Button onClick={this.quyuyes} style={{ width: '60%', lineHeight: '0.5rem', height: '0.5rem', fontSize: "0.3rem" }} type="primary">确定</Button>
                    </div>
                </div>
                <div className={this.state.jiageflag ? style.paixu : style.nopaixu}>
                    <div className={style.jiagetop}>
                        <div>
                            <h3>均价<span>单选</span></h3>
                            <div className={style.junjia}>
                                <div onClick={this.clearJunjia} className={this.state.junjiaarr.length ? '' : style.xuan}>不限</div>
                                {
                                    this.state.junjia.map(item => {
                                        return <div className={this.state.junjiaarr.indexOf(item) !== -1 ? style.xuan : ''} onClick={this.changeJunjiaarr} key={item}>{item}</div>
                                    })
                                }
                            </div>
                            <h3>总价<span>单选</span></h3>
                            <div className={style.zongjia}>
                                <div onClick={this.clearZongjia} className={this.state.zongjiaarr.length ? '' : style.xuan}>不限</div>
                                {
                                    this.state.zongjia.map(item => {
                                        return <div key={item} onClick={this.changeZongJiaarr} className={this.state.zongjiaarr.indexOf(item) !== -1 ? style.xuan : ''}>{item}</div>
                                    })
                                }
                            </div>
                        </div>
                    </div>
                    <div style={{ width: '100%', position: 'absolute', bottom: 0, display: 'flex', justifyContent: 'space-around', marginTop: '0.2rem', borderTop: "1px solid #c3c7ca", paddingTop: '0.1rem' }}>
                        <Button onClick={this.zongjiano} style={{ color: '#919598', width: '20%', lineHeight: '0.5rem', height: '0.5rem', fontSize: "0.3rem", background: "#ebf5ff", border: '0' }}>清空</Button>
                        <Button onClick={this.zongjiayes} style={{ width: '60%', lineHeight: '0.5rem', height: '0.5rem', fontSize: "0.3rem" }} type="primary">确定</Button>
                    </div>
                </div>
                <div className={this.state.saixuanflag ? style.paixu : style.nopaixu}>
                    <div className={style.saixuantop}>
                        <h3>
                            物业类型<span>(多选)</span>
                        </h3>
                        <div className={style.wuye}>
                            <div onClick={this.wuyeclear} className={this.state.wuyearr.length?'':style.xuan}>不限</div>
                            {
                                this.state.wuye.map(item=>{
                                    return <div onClick={this.changeWuye} className={this.state.wuyearr.indexOf(item)===-1?'':style.xuan} key={item}>
                                        {item}
                                    </div>
                                })
                            }
                        </div>
                        <h3>
                            装修状况
                        </h3>
                        <div className={style.zhangxiu}>
                            <div onClick={this.zhuangxiuclear} className={this.state.zhuangxiuarr?'':style.xuan}>不限</div>
                            {
                                this.state.zhuangxiu.map(item=>{
                                    return <div onClick={this.changeZhuangXiu} className={this.state.zhuangxiuarr===item?style.xuan:''} key={item} >{item}</div>
                                })
                            }
                        </div>
                        <h3>
                            售卖状态<span>(多选)</span>
                        </h3>
                        <div className={style.shoumai}>
                            <div className={this.state.shoumaiarr.length?'':style.xuan} onClick={this.clearshou}>不限</div>
                            {
                                this.state.shoumai.map(item=>{
                                    return <div onClick={this.changeShouMai} className={this.state.shoumaiarr.indexOf(item)===-1?'':style.xuan} key={item} >{item}</div>
                                })
                            }
                        </div>
                        <h3>
                            开盘时间
                        </h3>
                        <div className={style.kaipan}>
                            <div onClick={this.clearKaipan} className={this.state.kaipanarr===''?style.xuan:''} onClick={this.clearKaipan}>不限</div>
                            {
                                this.state.kaipan.map(item=>{
                                    return <div onClick={this.changeKaiPan} key={item} className={this.state.kaipanarr===item?style.xuan:''} >{item}</div>
                                })
                            }
                        </div>
                        <h3>
                            特色<span>(多选)</span>
                        </h3>
                        <div className={style.tese}>
                            {
                                this.state.tese.map(item=>{
                                    return <div onClick={this.changeTeSe} className={this.state.tesearr.indexOf(item)===-1?'':style.xuan} key={item} >{item}</div>
                                })
                            }
                        </div>
                    </div>
                    <div style={{ width: '100%', position: 'absolute', bottom: 0, display: 'flex', justifyContent: 'space-around', marginTop: '0.2rem', borderTop: "1px solid #c3c7ca", paddingTop: '0.1rem' }}>
                        <Button onClick={this.clearSai} style={{ color: '#919598', width: '20%', lineHeight: '0.5rem', height: '0.5rem', fontSize: "0.3rem", background: "#ebf5ff", border: '0' }}>清空</Button>
                        <Button onClick={this.Saiyes} style={{ width: '60%', lineHeight: '0.5rem', height: '0.5rem', fontSize: "0.3rem" }} type="primary">确定</Button>
                    </div>
                </div>
            </div>
        )
    }
}

export default list_nav
